<template>
  <div class="edge-config-container">
    <a-tabs v-model="activeIndex" size="small">
      <a-tab-pane key="1" tab="样式">
        <a-form-model :model="form">
          <a-form-model-item label="线形">
            <a-select
              style="width: 100%"
              v-model="form.line"
              @change="handleLine($event)"
              placeholder="请选择"
            >
              <a-select-option :value="1">
                实线
              </a-select-option>
              <a-select-option :value="2">
                虚线
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="箭头">
            <a-select
              style="width: 100%"
              v-model="form.arrow"
              @change="handleArrow($event)"
              placeholder="请选择"
            >
              <a-select-option :value="1">正向</a-select-option>
              <a-select-option :value="2">逆向</a-select-option>
              <a-select-option :value="3">双向</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="文本">
            <a-input
              v-model="form.text"
              @change="handleLabel($event)"
              placeholder="请输入"
            ></a-input>
          </a-form-model-item>
        </a-form-model>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import { Edge } from "@antv/x6";
export default {
  name: "EdgeConfigContainer",
  props: {
    edge: Edge,
  },
  data() {
    return {
      activeIndex: "1",
      curEdge: {},
      form: {
        //线形
        line: 1,
        //箭头
        arrow: 1,
        //文本
        text: "",
      },
    };
  },
  watch: {
    edge(newValue) {
      this.curEdge = newValue;
      this.getInitEdgeData();
    },
    curEdge(newValue) {
      this.$emit("updateData", newValue);
    },
  },
  methods: {
    getInitEdgeData() {
      let { line } = this.curEdge?.attrs;
      //线形
      switch (line.strokeDasharray) {
        case 5.5:
          this.form.line = 2;
          break;
        default:
          this.form.line = 1;
          break;
      }
      //箭头
      if (line?.targetMarker && line?.sourceMarker) {
        this.form.arrow = 3;
      } else if (line?.targetMarker) {
        this.form.arrow = 1;
      } else if (line?.sourceMarker) {
        this.form.arrow = 2;
      }
      //文字
      this.curEdge.labels && this.curEdge.labels.length
        ? this.curEdge.labels[0].attrs.text.text
        : "";
      this.form.text = this.curEdge.labels?.[0]?.attrs?.text?.text ?? "";
    },

    // 更新线的虚实
    handleLine() {
      let { line } = this.form;
      if (line === 2) {
        this.curEdge.setAttrs({
          line: {
            strokeDasharray: 5.5,
          },
        });
      } else {
        this.curEdge.removeAttrByPath("line/strokeDasharray");
      }
    },

    // 更新箭头
    handleArrow() {
      let { arrow } = this.form;
      switch (arrow) {
        // 正向箭头
        case 1:
          this.curEdge.setAttrs({
            line: {
              targetMarker: {
                name: "block",
                width: 12,
                height: 8,
              },
            },
          });
          this.curEdge.removeAttrByPath("line/sourceMarker");
          break;
        // 逆向箭头
        case 2:
          this.curEdge.setAttrs({
            line: {
              sourceMarker: {
                name: "block",
                width: 12,
                height: 8,
              },
            },
          });
          this.curEdge.removeAttrByPath("line/targetMarker");
          break;
        // 双向箭头
        case 3:
          this.curEdge.setAttrs({
            line: {
              targetMarker: {
                name: "block",
                width: 12,
                height: 8,
              },
              sourceMarker: {
                name: "block",
                width: 12,
                height: 8,
              },
            },
          });
          break;
      }
    },

    // 在箭头中插入文本
    handleLabel() {
      let { text } = this.form;
      this.curEdge.removeLabelAt(0);
      this.curEdge.appendLabel({
        attrs: {
          text: {
            text: text,
          },
        },
      });
    },

    //表单重置
    resetForm() {
      this.form = {
        //线形
        line: undefined,
        //箭头
        arrow: undefined,
        //文本
        text: "",
      };
    },
  },
};
</script>

<style lang="less" scoped>
.edge-config-container {
  /deep/.ant-form {
    margin: 0 10px;
    .ant-form-item {
      display: flex;
      .ant-form-item-label {
        flex-shrink: 0;
        width: 40px;
      }
      .ant-form-item-control-wrapper {
        flex: 1;
        overflow: hidden;
      }
    }
  }
}
</style>
